<template>
  <div class="headerbox">
    <!-- 搜索组件 -->
    <Async_search_part v-show="props.Searchval" @input="input" />
    <!-- 编辑
    <i class="iconfont editicon" v-show="props.Editval" @click="edit">&#xe617;</i> -->
    <!-- 返回 -->
    <span class="xiao" v-show="props.xiao" @click="goback">&lt;</span>
    <!-- 标题 -->
    <p class="title" v-show="props.title">{{ title }}</p>
    <!-- 更多
    <span class="iconfont more" v-show="props.more">&#xe719;</span> -->
    <!-- 俩人
    <i class="iconfont people" @click="$router.push('/userlist')" v-show="props.people"> &#xe632;</i> -->
    <!-- 四个正方块
    <i class="iconfont duo" v-show="duo">&#xe745;</i> -->
    <!-- 设置
    <i class="iconfont shezhi" v-show="props.shezhi" @click="install">&#xe601;</i> -->
  </div>
</template>

<script setup>
const Async_search_part = defineAsyncComponent(() => import('./search-part.vue'))
import { defineAsyncComponent } from 'vue'
const props = defineProps({
  // 控制搜索框的显示隐藏
  Searchval: {
    type: Boolean,
    default: false
  },
  // 控制编辑图标的显示隐藏
  // Editval: {
  //   type: Boolean,
  //   default: false
  // },
  // 控制字段的内容
  title: {
    type: String
  },
  // 控制更多图标的显示隐藏
  // more: {
  //   type: Boolean,
  //   default: false
  // },
  // 控制小于号图标的显示隐藏
  xiao: {
    type: Boolean,
    default: false
  },
  // 控制people图标的显示隐藏
  // people: {
  //   type: Boolean,
  //   default: false
  // },
  // 控制duo图标的显示隐藏
  // duo: {
  //   type: Boolean,
  //   default: false
  // },
  // 控制设置图标的显示隐藏
  // shezhi: {
  //   type: Boolean,
  //   default: false
  // }
})
const emit = defineEmits(['goback', 'edit', 'search', 'install'])
// 返回按钮
function goback() {
  emit('goback')
}
// 搜索功能
function input(val) {
  emit('input', val)
}


</script>

<style lang="scss" scoped>
$width: 100%;

.headerbox {
  position: fixed;
  background-color: rgba(22, 22, 34, 1);
  color: #fff;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 44px;
  font-size: 16px;
  text-align: center;
  line-height: 44px;

  .more {
    font-size: 26px;
  }

  .shezhi {
    position: absolute;
    left: 230px;
    font-size: 20px;
    top: 0;
  }

  .editicon {
    color: rgb(51, 51, 51);
  }

  .title {
    font-size: 16px;
  }

  .xiao {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    margin-left: 10px;
  }

  .people {
    float: left;
  }

  .duo {
    float: right;
  }
}
</style>